<!DOCTYPE html>
<!-- 
/////////////////////////////////////////////////////////////////////////////////////////////////


		   _ _   _       _   _   _ _______            _      
		  | (_) (_)     | | (_) (_)__   __|          | |     
		  | | ___  _ __ | | _____    | |_ __ __ _  __| | ___ 
	  _   | |/ _ \| '_ \| |/ / _ \   | | '__/ _` |/ _` |/ _ \
	 | |__| | (_) | | | |   < (_) |  | | | | (_| | (_| |  __/
	  \____/ \___/|_| |_|_|\_\___/   |_|_|  \__,_|\__,_|\___|
															 
		APPLIED WEB ARCHITECTURE - GROUP PROJECT ASSIGNEMENT
	
	LEAD DEVELOPPER		Jalil BENAYACHI
	LIVE DEMO			http://thejals.com/projects/jonkotrade/
	GOOGLE PROJECT		https://code.google.com/p/jonkotrade/
	LICENSE				(after PingPong release:) MIT Open-source License
	
	ABOUT THE PROJECT	/ 	CREDITS
	=	STOCK PHOTOS
		Since it's a marketing website project, we had to use stock photos to illustrate
		the different contents. Both are coming from a royalty-free image db websites,
		such as http://www.dreamstime.com/free-photos 
		
	= 	LAYOUT	
		Some of the layout CSS comes from third-party developers, shared open-source.
		Same about the Javascript: jQuerry and animations libraries were used.
		The main HTML was adapted from a previous project of mine, a Wordpress-like
		CMS which I didn't finally released.
		Instead Bootstrap I used WWW.GETSKELETON.COM to make the website responsive.
		
	=	PHP / SQL
		All the PHP and SQL was made from start to scratch after studying the project
		description and creating a list of features the website has to be able to do.
		Some were added during the development process.
		
	= 	HOSTING
		Since the PHP is server side, the project was developed using uWamp Server 
		(Similar to WAMP SERVER) for local-dev and live demo is hosted on my personal
		virtual private server (VPS) that I turned into an Apache2, PHP, mySQL (LAMP)
		server. It is ran by Ubuntu 14.04 LTS and hosted in OVH.fr's Roubaix Datacenters, FRANCE.

	=	SUBVERSION
		Because it is a group project, we used a subversion server (Hosted by Google Projects)
		with TortoiseSVN windows client. The Subversion's server address can be found on the 
		Google project page.
		
		svn checkout http://jonkotrade.googlecode.com/svn/ jonkotrade-read-only
	
	LET'S PUT SOME CODE DOWN THERE NOW
/////////////////////////////////////////////////////////////////////////////////////////////////
 -->
<?php 
$path="../";
$page="products"; // active page (for the menu css)
include_once('includes/header.inc.php'); ?>




<?php
if(!isset($_GET['product'])) //Browsing everything
{

echo'
<section id="home" class="home boxed">
		<div class="container">
			
			<!-- Text -->
			<div class="four columns">
				<div class="animated slideInLeft">
				<h1 class="title"><span class="title-highlight">Products</span><br/>Browsing</h1>
				
				<div class="subtitle">
					<p style="font-family: Roboto Slab; font-weight: 300;">
						Find all the products being sold around you.
						<ul style="font-family: Roboto Slab; font-weight: 300; font-size: 0.8em;">
						<li>Four, multi-directional spherical spinner wheels for easy mobility</li>
						<li>Rolls upright so there is no weight on your arm or shoulder</li>
						<li>Fully featured interior includes WetPak, mesh and modesty pockets for increased organization</li>
						<li>Tri-fold removable suiter provides added protection for business attire</li>
						<li>Gel-infused, push-button locking handle provides a comfortable grip</li>
						</ul>
					</p>
				</div> <!-- /.subtitle -->

				<a href="products" class="button brows-button"><i class="fa fa-shopping-cart" ></i> Purchase</a>
			</div><!-- /.eight columns -->
			</div>
			<div class="twelve columns" style="margin-bottom: 20px;">
			<h2 style="font-weight: 200;">Browse products</h2> 
			<span class="small">Category: <a>All</a> - Sorted by: <a>Date (desc)</a> - Keyword: <a>(none)</a></span>
			</div>
			';
			$askproducts = $db->query('SELECT * FROM jktrade_products ORDER BY PR_ID DESC LIMIT 0, 10 ');
			while ($productdata = $askproducts->fetch())
			{
			echo'
			<!-- Product Displayblock -->
			<div class="twelve columns animated slideInRight"  style="background-color: #eeeeee; padding-top: 10px; padding-bottom: 10px; position:relative; margin-bottom: 15px;">
				
				
						<div class="three columns">
							
							<img src="../uploads/products/thumb_'.$productdata['pr_mainpic'].'" height="200" width="200" style="border: 1px solid;"/>

						</div><!-- /Product picture -->
						
						<!-- Product informations -->
						<div class="eight columns" style="font-size: 0.8em;" padding-bottom:30px;>
							<h4 style="font-weight: 500;">'.$productdata['pr_name'].'</h4> 
							<span class="small">Category: <a>'.$productdata['pr_cat'].'</a> - Seller: <a>'.$productdata['pr_seller'].'</a></span>
						
							<div style="padding-bottom: 40px;">
								'.$productdata['pr_desc'].'
 
							</div>
   

							<div style="position: absolute; bottom: 0px; ">
							<div class="five columns" style="padding-top:5px;">
							<a href="?product='.$productdata['pr_id'].'" ><i class="fa fa-newspaper-o fa-lg" ></i> Product details</a> - <a href="products" ><i class="fa fa-shopping-cart fa-lg" ></i> Add to cart</a>
							</div>
							<div class="two columns">
							<h3 style="color: #0069ab;">'.$productdata['pr_price'].'kr-</h3>
							</div>
							</div>
							
							
						</div><!-- /.Product info -->
			</div><!-- /.Product displayblock -->
			';
			}
			
			echo'
			
		</div> <!-- /.container -->
		
	</section>

';




}




if(isset($_GET['product']) AND $_GET['product']!=NULL){ // Product display

$askproducts = $db->query('SELECT * FROM jktrade_products WHERE PR_ID = '.$_GET['product'].' ');
$productdata = $askproducts->fetch();
$askseller = $db->query('SELECT * FROM jktrade_users WHERE ID = '.$productdata['pr_seller'].' ');
$sellerdata = $askseller->fetch();


echo'

<section id="home" class="home boxed">
		<div class="container">
			
			<!-- Text -->
			<div class="eight columns">
				<div class="animated slideInLeft">
				<h1 class="title"><span class="title-highlight">'.$productdata['pr_name'].'</span><br/>'.$productdata['pr_price'].' kr-</h1>
				
				<div class="subtitle">
					<p style="font-family: Roboto Slab; font-weight: 300;">
						'.$productdata['pr_desc'].'<br/><br/>
						'.$productdata['pr_largedesc'].'
					</p>
				</div> <!-- /.subtitle -->

				<a href="?pr_id='.$productdata['pr_id'].'&action=buy" class="button brows-button"><i class="fa fa-shopping-cart" ></i> Purchase</a>
			</div><!-- /.eight columns -->
			</div>
			<!-- Image -->
			<div class="eight columns">
				<img src="../uploads/products/'.$productdata['pr_mainpic'].'" alt="Product Picture" style="border: 1px solid; box-shadow: 2px 2px 5px #333333;">
			</div><!-- /.eight columns -->

		</div> <!-- /.container -->
		
	</section>
	
	<section id="overview" class="overview boxed">
		<div class="container">
			
			<!-- Text -->
			<div class="six columns">
				
				<h3>About the <span class="title-highlight">Seller</span></h3>
				
				<div class="subtitle">
					<img src="../data/img/author-avatar.png"/>
					<h4>'.$sellerdata['name'].'</h4>
					<p style="font-family: Roboto Slab; font-weight: 300;">
						Citizen
						<ul style="font-family: Roboto Slab; font-weight: 300; font-size: 0.8em;">
						<li><h5>Other products from John Doe</h5></li>
						<li><a>Nespresso Coffee Machine</a></li>
						<li><a>Bosch mini-Fridge</a></li>
						<li><a>Home-made Wood desk<a></li>
						<li><a>HP Wireless Printer<a></li>
						</ul>
					</p>
				</div> <!-- /.subtitle -->
				<a href="../account/" class="button brows-button"><i class="fa fa-user"></i> Profile</a>
				<a href="../account/?action=inbox&send='.$sellerdata['id'].'" class="button brows-button"><i class="fa fa-envelope"></i> Send him a message</a>

			<!-- /.eight columns -->
			</div>
			<!-- Image -->

			<div class="six columns offset-by-three" >
				<h3>Area</h3>
				
				<div class="subtitle">
					<div id="map">
					<iframe width="400" height="400" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q='.$productdata['pr_area'].'+Jonkoping&key=AIzaSyCe04497FREUkdpdvZRZb9ja1X80q7lXCQ"></iframe> 
					
					</div>
					<h4>'.$productdata['pr_area'].'</h4>
					<p style="font-family: Roboto Slab; font-weight: 300;">
						Jönköping
						<ul style="font-family: Roboto Slab; font-weight: 300; font-size: 0.8em;">
						<li><h5>Reviews of John Doe</h5></li>
						<li><strong>9/10 - Excellent Seller</strong> by <a>Jane Doe</a></li>
						<li><strong>7/10 - Good Seller</strong> by <a>Barack Obama</a></li>
						</ul>
					</p>
				</div> <!-- /.subtitle -->
			</div><!-- /.eight columns -->

		</div> <!-- /.container -->
		
	</section>
';
}
 ?>



<?php include_once('includes/footer.inc.php'); ?>